<template>
  <BasicModal :title="t('layout.header.dropdownChangeApi')" v-bind="$attrs" @register="register" @ok="handelSubmit" @cancel="handelCancel">
    <BasicForm @register="registerForm">
      <template #api="{ model, field }">
        <RadioGroup v-model:value="model[field]">
          <Radio :style="radioStyle" :value="key" v-for="(val, key) in addresses" :key="key">{{ key }}: {{ val }}</Radio>
        </RadioGroup>
      </template>
    </BasicForm>
  </BasicModal>
</template>
<script lang="ts" setup>
import { Radio } from 'ant-design-vue';
import { useI18n } from '@/hooks/web/useI18n';
import { BasicModal, useModalInner } from '@begcode/components';
import { BasicForm, useForm } from '@begcode/components';
import { ref } from 'vue';
import { useAppStore } from '@/store/modules/app';
import type { ApiAddress } from '#/store';
const appStore = useAppStore();
const RadioGroup = Radio.Group;
const { t } = useI18n();
const [register, { closeModal }] = useModalInner(async () => {
  initData();
});
// perf 能读取所有.env.xxx文件最好, 另外key与--mode XXX最好相同
const addresses = ref({
  development: 'http://www.a.com',
  test: 'http://www.b.com',
  prod: 'http://www.c.com',
});
const radioStyle = ref({
  display: 'flex',
  height: '30px',
  lineHeight: '30px',
});
const [registerForm, { validateFields, setFieldsValue }] = useForm({
  showActionButtonGroup: false,
  schemas: [
    {
      field: 'api',
      label: t('layout.header.dropdownChangeApi'),
      colProps: {
        span: 24,
      },
      defaultValue: import.meta.env.MODE || 'development', // 当前环境
      required: true,
      // component: 'Input',
      slot: 'api',
    },
  ],
});
const handelSubmit = async () => {
  const values = await validateFields();
  appStore.setApiAddress({
    key: values.api,
    val: addresses.value[values.api],
  });
  location.reload();
};
const handelCancel = () => {
  closeModal();
};
const initData = () => {
  const { key = '' } = appStore.getApiAddress as ApiAddress;
  if (key) {
    setFieldsValue({
      api: key,
    });
  }
};
</script>
<style lang="less"></style>
